<template>
	<view class="container">
		<!-- 顶部标题 -->
		<view id="titlebar" class="flex-centner">
			<view class="leftme flex-center" @click="handlerMiniAvatarClick">
				<image class="logo" src="../../static/imgs/index/sy_wd@2x.png"></image>
			</view>
			<view class="name flex-center flex-around">
				<image class="logo" src="../../static/imgs/index/sy_logo@2x.png"></image>
			</view>
			<view class="buttons flex-center">
				<navigator url="/pages/message/message" hover-class=""><image class="logo" src="../../static/imgs/index/sy_xx@2x.png"></image></navigator>
				<navigator url="/pages/message/message" hover-class=""><image class="logo" src="../../static/imgs/index/sy_fx@2x.png"></image></navigator>
			</view>
		</view>

		<!-- 主体 -->
		<scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower">
			<!-- 顶部轮播图 -->
			<uni-swiper-dot class="top-swiper-dot" :info="info" :current="current" field="content" mode="default">
				<swiper class="top-swiper-box" @change="change">
					<swiper-item v-for="(item ,index) in info" :key="index">
						<view class="swiper-item">
							<image class="logo" :src="'../../static/test/' + index + '.jpg'"></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>

			<!-- 我关注的品牌 -->
			<view class="i-care-brands">
				<text class="bt">我关注的品牌</text>
				<view class="brands-and-action flex-btw">
					<view class="left flex-center">

						<view class="item" v-for="(item ,index) in info" :key="index">
							<navigator class="fullbox" url="/pages/merchant/index">
								<image class="avatar" :src="'../../static/test/a' + index + '.jpg'"></image>
							</navigator>
						</view>
					</view>
					<view class="right flex-center">
						<button class="uni-mini yueke" type="warn" @click="$refs['yuekepopup'].open()">约课</button>
						<!-- <view class="yueke"></view> -->
							<navigator url="/pages/gongzuoshi/gongzuoshi"><view class="hambuger"></view></navigator>
					</view>
				</view>
			</view>

			<!-- 最新活动 -->
			<view class="group-header flex-btw">
				<view class="title">最新活动</view>
				<navigator url="/pages/index/activity"><view class="more">更多></view></navigator>
			</view>
			<view id="zxhd">
				<scroll-view class="hdItems" scroll-x="true">
					<view class="hdItem" v-for="(item, index) in info" :key="index">
						<image class="background" :src="'../../static/test/' + (5 - index) + '.jpg'"></image>
						<view class="tag">
							<view class="title">#街舞随手拍</view>
							<view class="pop">
								<image class="icon" src="../../static/imgs/index/sy_hdcy@2x.png">{{(index + 1) * 5}}人参与
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 最新作品-->
			<view class="group-header flex-btw">
				<view class="title">最新作品</view>
				<navigator url="/pages/index/product"><view class="more">更多></view></navigator>
			</view>
			<view class="zpList">
				<div class="zpItem" v-for="(item, index) in videoList" :key="index">
					<!-- <video v-show="!modalOn" :id="'video' + index" @play="videoPlay(index)" class="video" :src="item.src" :autoplay="false" duration="" controls="true" :loop="false" :muted="false" initial-time="true" direction="-90" show-mute-btn="true"></video> -->
					<!-- <image class="shipin" v-show="modalOn" src="../../static/imgs/index/shipin.png">-->
					<view class="videoImg">
						<image class="shipin" :src="'../../static/test/' + (6 + index) + '.png'">
							<view class="video-cover" @click="showVideos">
								<view class="video-cover-play-button"></view>
								<text class="video-cover-duration">06:07</text>
							</view>
					</view>
					<view class="bottomMenu">
						<view class="bfs">播放数 {{item.bofang}}</view>
						<view class="right">
							<view class="r1 flex-center">
								<image class="icon" src="../../static/imgs/index/sy_zan@2x.png">{{item.dianzan}}
							</view>
							<view class="r1 flex-center">
								<image class="icon" src="../../static/imgs/index/sy_pl@2x.png">{{item.pinglun}}
							</view>
							<view class="flex-center">
								<image class="icon" src="../../static/imgs/index/sy_zf@2x.png">
							</view>
						</view>
					</view>
				</div>
			</view>
		</scroll-view>

		<!-- 左侧抽屉 -->
		<uni-drawer class="mydrawer" :visible="showDrawer" mode="left" @close="showDrawer = false">
			<view class="mydashboard" v-if="$store.state.isLogin">
				<view class="avatar-name flex-center">
					<view class="flex-center-around" @click="gotoHomepage()">
						<view class="avatar">
							<image :src="$store.state.currentUser.avatar || '../../static/imgs/index/sy_wd@2x.png'" class="avatarimg"></image>
						</view>
						<view class="name" :class="{shangjia:current==3}">{{$store.state.currentUser.nickname}}</view>
					</view>
					<view class="daka" v-if="current == 2">
						<image src="../../static/imgs/mine/wd_dk@2x.png" class="dkimg"></image>
					</view>
					<view class="daka" v-if="current == 3">
						<image src="../../static/imgs/mine/wd_sys@2x.png" class="scan"></image>
					</view>
				</view>
				<view class="foolist" v-if="current != 3">
					<navigator url="/pages/yueke/yueke" hover-class="navigator-hover">
						<view class="item flex-center">
							<view class="icon">
								<image src="../../static/imgs/mine/wd_yk@2x.png">
							</view>
							<view class="t">约课记录</view>
						</view>
					</navigator>
					<navigator url="/pages/vipcard/vipcard" hover-class="navigator-hover">
						<view class="item flex-center">
							<view class="icon">
								<image src="../../static/imgs/mine/wd_hyk@2x.png">
							</view>
							<view class="t">会员卡</view>
						</view>
					</navigator>
					<navigator url="/pages/order/order" hover-class="navigator-hover">
						<view class="item flex-center">
							<view class="icon">
								<image src="../../static/imgs/mine/wd_cwgl@2x.png">
							</view>
							<view class="t">订单</view>
						</view>
					</navigator>
					<navigator url="/pages/setting/setting" hover-class="navigator-hover">
						<view class="item flex-center">
							<view class="icon">
								<image src="../../static/imgs/mine/wd_sz@2x.png">
							</view>
							<view class="t">设置</view>
						</view>
					</navigator>
				</view>
				<view class="foolist2" v-if="current == 3">
					<view class="item flex-center">
						<view class="icon">
							<image src="../../static/imgs/mine/wd_dpsz@2x.png">
						</view>
						<view class="t">店铺设置</view>
					</view>
					<view class="item flex-center">
						<view class="icon">
							<image src="../../static/imgs/mine/wd_rygl@2x.png">
						</view>
						<view class="t">人员管理</view>
					</view>
					<view class="item flex-center">
						<view class="icon">
							<image src="../../static/imgs/mine/wd_sjtj@2x.png">
						</view>
						<view class="t">数据统计</view>
					</view>
					<view class="item flex-center">
						<view class="icon">
							<image src="../../static/imgs/mine/wd_cwgl@2x.png">
						</view>
						<view class="t">财务管理</view>
					</view>
				</view>
				<navigator url="/pages/mine/renzheng" hover-class="navigator-hover" v-if="current == 0">
					<view class="apply flex-center">
						<image src="../../static/imgs/mine/wd_sq@2x.png"></image><text>申请入驻工作室</text>
					</view>
				</navigator>
				<view class="apply flex-center" v-if="current == 1">
					<image src="../../static/imgs/mine/wd_sq@2x.png"></image><text>正在审核中...</text>
				</view>
				<view class="apply ed flex-center" v-if="current == 2">
					<image src="../../static/imgs/mine/wd_qh@2x.png"></image><text>切换为商家</text>
				</view>
				<view class="apply ed2 flex-center" v-if="current == 3">
					<image src="../../static/imgs/mine/wd_qh@2x.png"></image><text>切换为用户</text>
				</view>
				<view class="adver">
					<image src="../../static/test/6.png"></image>
				</view>
			</view>
		</uni-drawer>

		<!-- 约课poppu -->
		<uni-popup ref="yuekepopup" type="center" @change="handlerPopupStatusChenge">
			<view id="yuekeContent">
				<view class="header">
					<image src="../../static/imgs/yueke/yk_md@2x.png"></image>
					<text class="title">请选择约课门店</text>
				</view>
				<scroll-view :scroll-top="0" scroll-y="true" class="scrollview">
					<view class="mds">
						<view class="item" v-for="(item, index) in info" :key="index">
							<view class="logo">
								<image class="avatar" :src="'../../static/test/a' + index + '.jpg'"></image>
							</view>
							<view class="name">DHCF工作室</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import uniDrawer from '@/components/uni-drawer/uni-drawer.vue'
	import uniSwiperDot from "@/components/uni-swiper-dot/uni-swiper-dot.vue"
	export default {
		components: {
			uniPopup,
			uniDrawer,
			uniSwiperDot
		},
		data() {
			return {
				showDrawer: false,
				old: {
					scrollTop: 0
				},
				info: [1, 2, 3, 4],
				popupSatatus: false,
				videoList: [{
					src: "https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v",
					bofang: 4567,
					dianzan: 10,
					pinglun: 10
				}, {
					src: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v',
					bofang: '55w',
					dianzan: '23w',
					pinglun: 1000
				}],
				current: 0
			};
		},
		computed: {
			modalOn() {
				return this.showDrawer || this.popupSatatus;
			},
		},
		methods: {
			showVideos: function() {
				uni.navigateTo({
					url: '/pages/video/myvideo'
				});
			},
			gotoHomepage: function () {
				uni.navigateTo({
					url: '/pages/mine/home'
				});
			},
			handlerPopupStatusChenge: function(e) {
				this.popupSatatus = e.show;
			},
			handlerMiniAvatarClick: function() {
				this.videoList.forEach((obj, index) => {
					var context = uni.createVideoContext('video' + index, this);
					context.pause();
				});

				if (this.$store.state.isLogin) {
					this.showDrawer = true;
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}
			},
			videoPlay: function(playIndex) {
				this.videoList.forEach((obj, index) => {
					var context = uni.createVideoContext('video' + index, this);
					playIndex != index && context.pause();
				});
			},
			change(e) {
				this.current = e.detail.current
			},
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			}
		},
		onBackPress() {
			this.$refs['yuekepopup'].close();
			this.showDrawer = false;
		},
		onLoad() {
			var userInfo = uni.getStorageSync('userStatus');
			this.$store.commit("userStatus", userInfo);
		},
		onShow: function(options) {
			console.log(options);
			console.log('Index Show');
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		overflow: hidden;
	}

	.scroll-Y {
		// #ifdef APP-PLUS
		min-height: calc(100vh - 44px - 35px);
		margin-top: calc(44px + 35px);
		// #endif
		// #ifdef H5
		height: calc(100vh - 44px);
		margin-top: 44px;
		// #endif
	}

	#titlebar {
		// #ifdef APP-PLUS
		padding-top: 35px;
		// #endif
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: fixed;
		width: 100%;
		z-index: 4;
		background: #fff;

		.leftme {
			flex: 1;
			padding-left: 10pt;

			.logo {
				width: 22px;
				height: 22px;
			}
		}

		.name {
			flex: 3;

			.logo {
				width: 50px;
				height: 22px;
			}
		}

		.buttons {
			flex: 1;
			flex-direction: row-reverse;
			padding-right: 10pt;

			.logo {
				width: 18px;
				height: 18px;
				margin-left: 9px;
			}
		}
	}

	.top-swiper-dot {
		/deep/ .uni-swiper__dots-box {
			bottom: 20px !important;
			justify-content: start;
			left: 40px;
		}
	}

	.top-swiper-box {
		margin: 10pt;
		height: 280rpx;

		uni-swiper-item {
			padding: 0 1px;
		}

		.swiper-item {
			width: 100%;
			height: 100%;

			.logo {
				width: 100%;
				height: 100%;
				border-radius: 15px;
			}
		}
	}

	.i-care-brands {
		margin: 10pt;

		.bt {
			color: #484848;
			font-size: 12px;
		}

		.brands-and-action {
			.left {
				flex: 7;
				height: 44px;

				.item {
					width: 40px;
					height: 40px;
					margin-right: 10px;

					.avatar {
						border: 1px solid #848484;
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
			}

			.right {
				flex: 3;
				height: 44px;
				justify-content: flex-end;

				.yueke {
					position: absolute;
					right: 50px;
					display: inline-block;
					font-size: 13px;
					padding: 0 1.34em;
					color: #fff;
					background-color: #000000;

					&.button-hover {
						background-color: #303030;
						color: hsla(0, 0%, 100%, .6)
					}
				}

				.hambuger {
					width: 30px;
					height: 30px;
					background: url(../../static/imgs/index/sy_bj@3x.png);
					background-size: 100%;
				}
			}
		}
	}

	.group-header {
		margin: 10pt;

		.title {
			font-weight: bold;
			text-indent: 10px;
			position: relative;
			font-size: 15px;

			&::before {
				position: absolute;
				content: '';
				width: 6px;
				height: 20px;
				border-radius: 24px;
				background: #000;
				left: 0;
				top: 3px;
			}
		}

		.more {
			font-size: 14px;
			color: #9B9B9B;
		}
	}

	.mydrawer {
		/deep/ .uni-drawer__content {
			width: 270px;
		}

		/deep/ .uni-drawer--left {
			transform: translateX(-270px);
		}

		/deep/ .uni-drawer__content--visible {
			transform: translateX(0px);
		}
	}

	.mydashboard {
		position: absolute;
		z-index: 10;
		top: 0;
		left: 0;
		right: 0;
		width: calc(100% - 30pt);
		background-color: #fff;
		font-size: 14px;
		padding: 45px 15pt 15pt;
		height: calc(100vh - 45px);

		.avatar-name {
			height: 50px;
			margin-bottom: 20px;
			position: relative;

			.avatar {
				width: 50px;
				height: 50px;
				margin-right: 5pt;

				.avatarimg {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.name {
				font-size: 16px;

				&.shangjia {
					color: #440000;
				}
			}

			.daka {
				position: absolute;
				height: 50px;
				right: 0;
				display: flex;
				align-items: center;

				.dkimg {
					width: 20px;
					height: 20px;
				}

				.scan {
					width: 30px;
					height: 30px;
				}
			}
		}

		.foolist {
			.item {
				height: 40px;
				margin: 10px 0;

				.icon {
					width: 15px;
					height: 16px;
					padding-left: 17px;
					margin-right: 10pt;
					display: flex;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.t {
					font-size: 15px;
				}
			}
		}

		.foolist2 {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			width: 200px;
			height: 200px;
			margin: 30pt auto;

			.item {
				flex-direction: column;
				justify-content: space-evenly;
				box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.28);
				height: 80px;
				width: 80px;

				.icon {
					width: 28px;
					height: 28px;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.t {
					font-size: 15px;
				}
			}
		}

		.apply {
			height: 36px;
			border: 1px solid #410000;
			padding: 0 10px;
			border-radius: 25px;
			position: absolute;
			bottom: calc(45pt + 180px);
			width: calc(100% - 30pt - 20px);
			color: #410000;

			&.ed {
				background: #000;
				border: 1px solid #000;
				color: #fff;
			}

			&.ed2 {
				background: linear-gradient(to bottom, #410000, #000);
				;
				border: none;
				color: #fff;
			}

			image {
				width: 18px;
				height: 18px;
				margin: 0 10pt 0 3px;
			}

			text {
				font-size: 15px;
			}
		}

		.adver {
			position: absolute;
			bottom: 45pt;
			width: calc(100% - 30pt);
			height: 120px;

			image {
				width: 100%;
				height: 100%;
				border-radius: 10px;
			}
		}
	}

	#zxhd {
		margin-left: 10pt;
		width: calc(100vw - 10pt);
		height: 300rpx;

		.hdItems {
			padding-right: 10pt;
			white-space: nowrap;
		}

		.hdItem {
			position: relative;
			display: inline-block;
			width: 100%;
			height: 280rpx;
			width: 480rpx;
			margin-right: 10pt;
			margin-bottom: 20rpx;

			.background {
				width: 100%;
				height: 100%;
				border-radius: 10px;
			}

			.tag {
				position: absolute;
				width: 110px;
				height: 40px;
				bottom: 10pt;
				right: 0;
				padding: 5px 5pt 6px 10pt;
				background: rgba(39, 37, 34, 0.9);
				z-index: 2;
				color: #fff;

				&::before {
					z-index: -1;
					content: '';
					width: 0;
					height: 0;
					border-top: 50px solid rgba(39, 37, 34, 0.9);
					border-left: 20px solid transparent;
					position: absolute;
					top: 0;
					left: -20px;
				}

				.title {
					text-align: left;
					font-size: 13px;
					margin-left: -10px;
				}

				.pop {
					text-align: right;
					font-size: 12px;
					color: #aeacab;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.icon {
						width: 16px;
						height: 16px;
						margin-right: 2px;
					}
				}
			}
		}
	}

	.zpList {
		padding: 10pt;

		.zpItem {
			margin-bottom: 15pt;

			// border-radius: 10px;
			.shipin {
				width: 100%;
				height: 380rpx;
			}

			.video {
				width: 100%;
				height: 380rpx;
				// border-radius: 10px;
				z-index: 1;

				video {
					object-fit: cover !important;
					// border-radius: 10px;
				}

				&.hidden {
					/deep/ .uni-video-container {
						width: 100%;
						height: 380rpx;
					}

					video {
						display: none;
					}
				}
			}

			.videoImg {
				position: relative;
				width: 100%;
				height: 380rpx;
				border-radius: 10px;

				.shipin {
					border-radius: 10px;
				}
			}

			.bottomMenu {
				display: flex;
				height: 40px;
				align-items: center;
				position: relative;
				justify-content: space-between;
				border-bottom: 1px solid #cfcfcf;

				.bfs {
					&::before {
						content: '';
						position: absolute;
						width: 16px;
						height: 16px;
						background: url(../../static/imgs/index/sy_bf@2x.png);
						background-size: 100%;
						top: 11px;
						left: 2px;
					}

					color: #b9b9b9;
					font-size: 12px;
					text-indent: 20px;
				}

				.right {
					display: flex;

					.r1 {
						margin-right: 12px;
						font-size: 12px;
						color: #929292;
					}

					.icon {
						width: 14px;
						height: 14px;
						margin-right: 3px;
					}
				}
			}
		}
	}

	#yuekeContent {
		background: #fff;
		width: 320px;
		border-radius: 10px;
		height: 300px;
		position: absolute;
		left: calc(100% - 160px);
		top: -150px;

		.header {
			padding: 20px 20px 10px;
			display: flex;
			height: 32px;

			image {
				width: 28px;
				height: 28px;
			}

			.title {
				font-size: 18px;
				margin-left: 5pt;
			}
		}

		.scrollview {
			height: calc(300px - 72px);
		}

		.mds {
			.item {
				display: flex;
				margin: 0 10pt 15pt;
				border-radius: 10px;
				align-items: center;
				background: #424345;
				height: 70px;
				color: #fff;

				.logo {
					width: 50px;
					height: 50px;
					margin: 0 10px 0 30px;

					image {
						width: 50px;
						height: 50px;
						border-radius: 50%;
					}
				}

				.name {
					font-size: 20px;
				}
			}
		}
	}
</style>
